

<template>
    <view>
        <view class="care-list">
            <view v-for="(item , index) in careList" :key="index" class="care-item flex-box" @click="goDetails(item)">
                <view class="avatar">
                    <image :src="BASE_URL +item.avatar" mode="aspectFill"></image>
                </view>
                <view class="care-content flex-column justifyContent-spaceBetween flex-1">
                    <view class="name">{{item.name}}</view>
                    <view class="type-box">
                        <text v-for="(e,i) in item.type" :class="{'yellow':i== 0  }">{{e}}</text>
                    </view>
                    <view class="time color-80">
                        从业{{item.work_year}}年 | {{item.follow_num}}人感兴趣
                    </view>
                    <view class="city justifyContent-spaceBetween">
                       {{item.address}}  
                        <text >立即预约</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script >
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl  
export default {
    props: {
        careList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
			BASE_URL
        }
    },
    methods: {
        reservation(item) {
           this.$emit('reservation' ,item)
        },
		goDetails(item){
			uni.navigateTo({
				url: "/pageA/homeCare/details?id=" + item.id
			})
			// this.$emit('goDetails' ,item)
		}
    }
}
</script>
<style scoped lang="scss">

.care-list {
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #808080;
    .avatar {
        width: 160rpx;
        min-width: 160rpx;
        height: 200rpx;
        border-radius: 20rpx;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .care-content {
        margin-left: 20rpx;
    }
    .care-item {
        margin-bottom: 30rpx;
    }
    .name {
        font-size: 30rpx;
        color: #000;
        font-weight: bold;
    }
    .type-box {
        text {
            height: 32rpx;
            padding:0 15rpx;
            line-height: 32rpx;
            border-radius: 8rpx  ;
            border: 1px solid #43ABC4;
            color: #43ABC4;
            font-size: 20rpx;
            margin-right: 10rpx;
            background: #EFFBFE;
            &.yellow{
                background:#FFF8EC;
                border-color: #EF9E14;
            }
        }
    }
    .city {
        align-items: center;
        color: #4D4D4D;
        font-size: 24rpx;
        text {
            width: 160rpx;
            height: 56rpx;
            background: #43ABC4;
            border-radius: 40rpx ;
            text-align: center;
            line-height:56rpx;
            font-size: 28rpx;
            color: #fff;
        }
    }
}
</style>
